<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: Arial, sans-serif; background: #f5f6fa; margin: 0; }
        .container { max-width: 1200px; margin: 40px auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px #eee; padding: 32px; display: flex; }
        .left-gallery { display: flex; flex-direction: row; align-items: flex-start; width: 420px; margin-right: 40px; }
        .thumb-list { display: flex; flex-direction: column; gap: 12px; }
        .main-img { width: 340px; height: 340px; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 8px #eee; margin-left: 16px; }
        .thumb-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid #eee; }
        .thumb-img.selected { border: 2px solid #e1251b; }
        .right-info { flex: 1; }
        .title { font-size: 28px; font-weight: bold; color: #222; margin-bottom: 18px; }
        .desc { color: #666; margin-bottom: 18px; }
        .price-row { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
        .sell-price { color: #e1251b; font-size: 32px; font-weight: bold; }
        .origin-price { color: #999; font-size: 20px; text-decoration: line-through; }
        .spec-row { margin-bottom: 18px; }
        .spec-label { font-size: 18px; color: #333; margin-right: 12px; }
        .spec-list { display: flex; gap: 12px; flex-wrap: wrap; }
        .spec-item { border: 1px solid #eee; border-radius: 6px; padding: 8px 18px; font-size: 16px; cursor: pointer; background: #fafafa; transition: border 0.2s, background 0.2s; }
        .spec-item.selected { border: 2px solid #e1251b; background: #fff0f0; color: #e1251b; }
        .spec-item.disabled { color: #bbb; background: #f5f5f5; border: 1px solid #eee; cursor: not-allowed; position: relative; }
        .spec-soldout { position: absolute; top: 2px; right: 8px; font-size: 12px; color: #fff; background: #bbb; border-radius: 8px; padding: 0 8px; pointer-events: none; }
        .stock-row { margin-bottom: 18px; color: #666; }
        .buy-row { display: flex; gap: 18px; }
        .buy-btn, .cart-btn { padding: 14px 38px; font-size: 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; }
        .buy-btn { background: #e1251b; color: #fff; }
        .cart-btn { background: #fff; color: #e1251b; border: 2px solid #e1251b; }
        .buy-btn:disabled { background: #ccc; cursor: not-allowed; }
        .quantity-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
        .qty-btn { width: 48px; height: 48px; border: none; background: #f5f6fa; color: #888; font-size: 28px; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
        .qty-btn:active { background: #eaeaea; }
        .qty-num { font-size: 24px; width: 32px; text-align: center; display: inline-block; }
        @media (max-width: 900px) {
            .container { flex-direction: column; padding: 10px; }
            .left-gallery { width: 100%; margin-right: 0; }
            .main-img { height: 220px; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left-gallery">
        <div class="thumb-list" id="thumb-list"></div>
        <img id="main-img" class="main-img" src="" alt="商品主图">
    </div>
    <div class="right-info">
        <div class="title" id="product-title"></div>
        <div class="desc" id="product-desc"></div>
        <div class="price-row">
            <span class="sell-price" id="sell-price"></span>
            <span class="origin-price" id="origin-price"></span>
        </div>
        <div class="spec-row">
            <span class="spec-label">选择规格：</span>
            <div class="spec-list" id="spec-list"></div>
        </div>
        <div class="stock-row" id="stock-row"></div>
        <div class="quantity-row">
            <button class="qty-btn" id="qty-minus">-</button>
            <span class="qty-num" id="qty-num">1</span>
            <button class="qty-btn" id="qty-plus">+</button>
        </div>
        <div class="buy-row">
            <button class="cart-btn">加入购物车</button>
            <button class="buy-btn" id="buy-btn">立即购买</button>
        </div>
    </div>
</div>
<script>
function getQueryParam(name) {
    const url = window.location.search;
    const params = new URLSearchParams(url);
    return params.get(name);
}
const productId = getQueryParam('id');

// 获取商品详情和规格
fetch(`/product/detail/${productId}`)
    .then(res => res.json())
    .then(data => {
        if (!data.data) return;
        const product = data.data.product || {};
        const skuList = data.data.skuList || [];
        // 商品主信息
        document.getElementById('product-title').innerText = product.name || '';
        document.getElementById('product-desc').innerText = product.description || '';
        // 规格图片集
        let images = [product.imageUrl].filter(Boolean);
        skuList.forEach(sku => {
            if (sku.imageUrl && !images.includes(sku.imageUrl)) images.push(sku.imageUrl);
        });
        // 渲染主图和缩略图
        let mainImg = document.getElementById('main-img');
        let thumbList = document.getElementById('thumb-list');
        mainImg.src = images[0] || '';
        thumbList.innerHTML = images.map((img, idx) => `<img src="${img}" class="thumb-img${idx===0?' selected':''}" onclick="selectImg(${idx})">`).join('');
        window._allImgs = images;
        window.selectImg = function(idx) {
            mainImg.src = images[idx];
            document.querySelectorAll('.thumb-img').forEach((el, i) => el.classList.toggle('selected', i===idx));
        }
        // 渲染规格
        let specList = document.getElementById('spec-list');
        specList.innerHTML = skuList.map((sku, idx) => {
            let disabled = sku.stock <= 0;
            let selected = sku.isDefault === 1 && !disabled;
            return `<div class="spec-item${selected?' selected':''}${disabled?' disabled':''}" data-idx="${idx}" ${disabled?'':'onclick="selectSpec('+idx+')"'}>
                ${sku.specification}
                ${disabled?'<span class=\"spec-soldout\">无货</span>':''}
            </div>`;
        }).join('');
        // 默认选中规格
        let selectedIdx = skuList.findIndex(sku => sku.isDefault===1);
        if (selectedIdx === -1) selectedIdx = 0;
        window._skuList = skuList;
        window.selectSpec = function(idx) {
            document.querySelectorAll('.spec-item').forEach((el, i) => el.classList.toggle('selected', i===idx));
            renderSkuInfo(idx);
        }
        // 数量选择逻辑
        let maxStock = 1;
        let qty = 1;
        function updateQtyDisplay() {
            document.getElementById('qty-num').innerText = qty;
            document.getElementById('qty-minus').disabled = qty <= 1;
            document.getElementById('qty-plus').disabled = qty >= maxStock;
        }
        document.getElementById('qty-minus').onclick = function() {
            if (qty > 1) { qty--; updateQtyDisplay(); }
        }
        document.getElementById('qty-plus').onclick = function() {
            if (qty < maxStock) { qty++; updateQtyDisplay(); }
        }
        function renderSkuInfo(idx) {
            const sku = skuList[idx];
            document.getElementById('sell-price').innerText = '￥' + (sku.sellPrice || '--');
            document.getElementById('origin-price').innerText = sku.originalPrice ? '￥' + sku.originalPrice : '';
            document.getElementById('stock-row').innerText = '库存：' + (sku.stock || 0);
            document.getElementById('buy-btn').disabled = sku.stock <= 0;
            maxStock = sku.stock || 1;
            if (qty > maxStock) qty = maxStock;
            updateQtyDisplay();
        }
        renderSkuInfo(selectedIdx);
        // 选中默认规格
        document.querySelectorAll('.spec-item')[selectedIdx]?.classList.add('selected');
    });
</script>
</body>
</html> 